<template>
    <view>
		<cu-custom :bgColor="NavBarColor" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">轨迹</block>
		</cu-custom>
		<map
		style="width: 100%; height:690px;"
		:latitude="latitude"
		:longitude="longitude"
		:markers="marker"
		:polyline="polyline"
		:scale="scale"
		:key="menuKey"
		>
		</map>
    </view>

</template>

<script>
	export default {
	    data() {
	        return {
				menuKey:1,
				NavBarColor:this.NavBarColor,
	            id:0, // 使用 marker点击事件 需要填写id
	            title: 'map',
	          　latitude: '',  //纬度
		　　    longitude: '',  //经度
		       timer: null,
			    rpoints: [],
			   annotation:{
			   	id:"",
			   	routeId:""
			   },
		  　　　marker: [{
			   　　id:0,
			   　　latitude: '',//纬度
			   　　longitude: '',//经度
			   　　iconPath: '/static/qi.png',    //显示的图标
			   　　rotate:0,   // 旋转度数
			   　　width:20,   //宽
			   　　height:20,   //高
			  　　 title:'你在哪了',//标注点名
			  　　 alpha:0.5
		   },{
			   　　id:0,
			   　　latitude: '',//纬度
			   　　longitude: '',//经度
			   　　iconPath: '/static/z.png',    //显示的图标
			   　　rotate:0,   // 旋转度数
			   　　width:20,   //宽
			   　　height:20,   //高
			  　　 title:'你在哪了',//标注点名
			  　　 alpha:0.5
		   },{
			   　　id:0,
			   　　latitude: '',//纬度
			   　　longitude: '',//经度
			   　　iconPath: '/static/bq.png',    //显示的图标
			   　　rotate:0,   // 旋转度数
			   　　width:20,   //宽
			   　　height:20,   //高
			  　　 title:'你在哪了',//标注点名
			  　　 alpha:0.5
		   },{
			   　　id:0,
			   　　latitude: '',//纬度
			   　　longitude: '',//经度
			   　　iconPath: '/static/bz.png',    //显示的图标
			   　　rotate:0,   // 旋转度数
			   　　width:20,   //宽
			   　　height:20,   //高
			  　　 title:'你在哪了',//标注点名
			  　　 alpha:0.5
		   }],
		   scale:14,
		   polyline: [{ //添加polyline数组，设置要连接的点（从数组的第一项连接到最后一项），这里只设置连接两个点，演示下
		              points: [],
		                  color: "#FF0000", //设置连接的线的颜色
		                   width: 10, //线的宽度
		                   dottedLine: true, //线是否是虚线
		                   arrowLine: true,//线是带箭头的线，开发者工具暂时不支持

		              },{ //添加polyline数组，设置要连接的点（从数组的第一项连接到最后一项），这里只设置连接两个点，演示下
		              points: [],
		                  color: "#0000E3", //设置连接的线的颜色
		                   width: 10, //线的宽度
		                   dottedLine: true, //线是否是虚线
		                   arrowLine: true,//线是带箭头的线，开发者工具暂时不支持
		              },{ //添加polyline数组，设置要连接的点（从数组的第一项连接到最后一项），这里只设置连接两个点，演示下
		              points: [],
		                  color: "#0000E3", //设置连接的线的颜色
		                   width: 10, //线的宽度
		                   dottedLine: true, //线是否是虚线
		                   arrowLine: true,//线是带箭头的线，开发者工具暂时不支持
		              },{ //添加polyline数组，设置要连接的点（从数组的第一项连接到最后一项），这里只设置连接两个点，演示下
		              points: [],
		                  color: "#0000E3", //设置连接的线的颜色
		                   width: 10, //线的宽度
		                   dottedLine: true, //线是否是虚线
		                   arrowLine: true,//线是带箭头的线，开发者工具暂时不支持
		              },{ //添加polyline数组，设置要连接的点（从数组的第一项连接到最后一项），这里只设置连接两个点，演示下
		              points: [],
		                  color: "#0000E3", //设置连接的线的颜色
		                   width: 10, //线的宽度
		                   dottedLine: true, //线是否是虚线
		                   arrowLine: true,//线是带箭头的线，开发者工具暂时不支持
		              },{ //添加polyline数组，设置要连接的点（从数组的第一项连接到最后一项），这里只设置连接两个点，演示下
		              points: [],
		                  color: "#0000E3", //设置连接的线的颜色
		                   width: 10, //线的宽度
		                   dottedLine: true, //线是否是虚线
		                   arrowLine: true,//线是带箭头的线，开发者工具暂时不支持
		              },{ //添加polyline数组，设置要连接的点（从数组的第一项连接到最后一项），这里只设置连接两个点，演示下
		              points: [],
		                  color: "#0000E3", //设置连接的线的颜色
		                   width: 10, //线的宽度
		                   dottedLine: true, //线是否是虚线
		                   arrowLine: true,//线是带箭头的线，开发者工具暂时不支持
		              },{ //添加polyline数组，设置要连接的点（从数组的第一项连接到最后一项），这里只设置连接两个点，演示下
		              points: [],
		                  color: "#0000E3", //设置连接的线的颜色
		                   width: 10, //线的宽度
		                   dottedLine: true, //线是否是虚线
		                   arrowLine: true,//线是带箭头的线，开发者工具暂时不支持
		              },{ //添加polyline数组，设置要连接的点（从数组的第一项连接到最后一项），这里只设置连接两个点，演示下
		              points: [],
		                  color: "#0000E3", //设置连接的线的颜色
		                   width: 10, //线的宽度
		                   dottedLine: true, //线是否是虚线
		                   arrowLine: true,//线是带箭头的线，开发者工具暂时不支持
		              },{ //添加polyline数组，设置要连接的点（从数组的第一项连接到最后一项），这里只设置连接两个点，演示下
		              points: [],
		                  color: "#0000E3", //设置连接的线的颜色
		                   width: 10, //线的宽度
		                   dottedLine: true, //线是否是虚线
		                   arrowLine: true,//线是带箭头的线，开发者工具暂时不支持
		              },{ //添加polyline数组，设置要连接的点（从数组的第一项连接到最后一项），这里只设置连接两个点，演示下
		              points: [],
		                  color: "#0000E3", //设置连接的线的颜色
		                   width: 10, //线的宽度
		                   dottedLine: true, //线是否是虚线
		                   arrowLine: true,//线是带箭头的线，开发者工具暂时不支持
		              },{ //添加polyline数组，设置要连接的点（从数组的第一项连接到最后一项），这里只设置连接两个点，演示下
		              points: [],
		                  color: "#0000E3", //设置连接的线的颜色
		                   width: 10, //线的宽度
		                   dottedLine: true, //线是否是虚线
		                   arrowLine: true,//线是带箭头的线，开发者工具暂时不支持
		              },{ //添加polyline数组，设置要连接的点（从数组的第一项连接到最后一项），这里只设置连接两个点，演示下
		              points: [],
		                  color: "#0000E3", //设置连接的线的颜色
		                   width: 10, //线的宽度
		                   dottedLine: true, //线是否是虚线
		                   arrowLine: true,//线是带箭头的线，开发者工具暂时不支持
		              },{ //添加polyline数组，设置要连接的点（从数组的第一项连接到最后一项），这里只设置连接两个点，演示下
		              points: [],
		                  color: "#0000E3", //设置连接的线的颜色
		                   width: 10, //线的宽度
		                   dottedLine: true, //线是否是虚线
		                   arrowLine: true,//线是带箭头的线，开发者工具暂时不支持
		              },{ //添加polyline数组，设置要连接的点（从数组的第一项连接到最后一项），这里只设置连接两个点，演示下
		              points: [],
		                  color: "#0000E3", //设置连接的线的颜色
		                   width: 10, //线的宽度
		                   dottedLine: true, //线是否是虚线
		                   arrowLine: true,//线是带箭头的线，开发者工具暂时不支持
		              }],
	     }
	    },
		onLoad: function (option) {
			const annItem = JSON.parse(decodeURIComponent(option.item));
			this.annotation = annItem
			var that=this;
			console.log("aa"+this.annotation);

			this.getLocation();
			this.getRoute();
		},
	    methods: {
			getLocation(){
				var that=this;
				uni.getLocation({
				    type: 'wgs84',
				    success: function (res) {


				        console.log('当前位置的经度：' + res.longitude);
				        console.log('当前位置的纬度：' + res.latitude);
						    that.getRouteNew(res.longitude,res.latitude)


				    },
					fail: function (res) {
						 console.log('当前位置的经度');
					}
				});
			},getRoute(){
				var that=this;
				this.$http.get("/api/v1/appbusiness/two/getRoute",{params:{routeId:this.annotation.routeId}}).then(res=>{
							if (res.data.success){
								if(res.data.result.type==2){
									console.log("1234556");
									let data =res.data.result.list;
									data.forEach((item,index)=>{    //js遍历数组
									   console.log(item);
								        let ind=index+1;

										 that.polyline[ind].points=item


									});
								}else{
									that.rpoints=res.data.result.list;
									that.polyline[1].points=res.data.result.list
									that.marker[2].longitude= res.data.result.blo;
									that.marker[2].latitude = res.data.result.bla;
									that.marker[3].longitude= res.data.result.elo;
									that.marker[3].latitude = res.data.result.ela;
								}
								++that.menuKey
							    /* that.rpoints=res.data.result.list;
								that.polyline[1].points=res.data.result.list
								that.marker[2].longitude= res.data.result.blo;
								that.marker[2].latitude = res.data.result.bla;
								that.marker[3].longitude= res.data.result.elo;
								that.marker[3].latitude = res.data.result.ela;
								++that.menuKey	 */
			               }
				})
			},getRouteNew(longitude,latitude){
				var that=this;
				that.$http.get("/api/v1/appbusiness/two/getRouteXx",{params:{id:that.annotation.id}}).then(res=>{
						if (res.data.success){

														that.polyline[0].points=res.data.result.list
														that.marker[0].longitude= res.data.result.bla;
														that.marker[0].latitude = res.data.result.blo;
														that.marker[1].longitude= res.data.result.zla;
														that.marker[1].latitude = res.data.result.zlo;
														that.longitude= res.data.result.zla;
														that.latitude = res.data.result.zlo;
														++that.menuKey

						}else{
							that.longitude= longitude;
							that.latitude = latitude;
							++that.menuKey
						}
				})
			}
	    }
	}
</script>

<style>
</style>
